<template>
	<view>
		<view class="swiper_bg"> 
			<swiper class="swiper" circular :indicator-dots="banner.indicatorDots" :autoplay="banner.autoplay" :interval="banner.interval"
								:duration="banner.duration">
				<swiper-item v-for="(item,index) in huodong.tuwen" :key="index">
					<image class="banner" :src="item"></image>
				</swiper-item> 
			</swiper>
			<view style="width: 70rpx;height: 70rpx;float: left;margin-top: -470rpx;margin-left: 50rpx;border-radius: 60rpx;background-color: rgba(128, 128, 128, 0.5);z-index: inherit;position: fixed;">
				<image src="/static/detail_back.png" style="width: 50rpx;height: 50rpx;margin-top: 10rpx;margin-left: 10rpx;" ></image>
			</view>
		</view>
		<view class="detail-info1">
			<view class="detail-info1-title">
				{{huodong.name}}
			</view>
			<view class="detail-info1-item">
				<image src="../../static/ic_dizhi.png" class="detail-info1-item-img"></image>&nbsp;{{huodong.address}}
			</view> 
			<view class="detail-info1-item-price">
				<view  class="detail-price">
					 ￥{{huodong.price}}
				</view> 
			</view>
			<view style="width: 100%;height: 30rpx;float: left;"></view>
		</view>
		<view class="detail-info1"  >
			<view class="detail-info1-bm">
				<view class="detail-info1-bm-1"></view>群成员数：{{huodong.join}}/{{huodong.all}}
			</view>
		</view>
		<view class="detail-info1" style="font-size: 25rpx;">
			<view class="detail-info1-xq">
				 社群详情
			</view>
			<view v-for="(item,index) in huodong.xiangQing" :key="index">
				<view class="detail-info1-xq-title">&nbsp;&nbsp;{{item.title}}</view>
				<view class="detail-info1-xq-item" v-for="(item1,index1) in item.info" :key="index1">
					<view class="xq-lable">{{item1.title}}</view>
					<view class="xq-content">{{item1.content}}</view>
				</view>
			</view>
			<view class="detail-info1-xq">
				 图文详情
			</view>
			<view style="width: 100%;height: 10rpx;float: left;"></view>
			<image v-for="(item,index) in huodong.tuwen" :key="index" :src="item" style="width: 100%;height: 500rpx;float: left;"></image> 
			<view class="detail-info1-xq">
				 购买须知
			</view>
			<view v-for="(item,index) in huodong.xuzhi" :key="index">
				<view class="detail-info1-xq-title">&nbsp;&nbsp;{{item.title}}</view>
				<view class="detail-info1-xq-item" v-for="(item1,index1) in item.info" :key="index1"> 
					<view  style="width: 100%;">{{item1.content}}</view>
				</view>
			</view> 
			<view style="width: 100%;height: 20rpx;float: left;"></view>
		</view> 
		<view style="width: 100%;height: 150rpx;float: left;"></view>
		<view style="position: fixed;bottom: 0rpx;left:0rpx;height: 130rpx;width: 100%;background: white;">
			<view @click="showModal" class="detail-buy">
				申请入群
			</view>
			<view class="detail-buy" style="width: 90rpx;">
				<image src="/static/fx.png" style="width: 70rpx;height: 70rpx;margin-top: 10rpx;"></image>
			</view>
		</view>
		<view v-if="modalVisible" class="modal-container">
		    <view class="modal-content">
				<view style="width: 100%;height: 60rpx;text-align: center;">
					请填写正确信息
				</view>
				<view class="modal-content-item">
					<view class="modal-content-item-lable">
						价格：
					</view>
					<view class="modal-content-item-con">
						<view  class="modal-content-item-gg-se">
							{{huodong.price}}元
						</view>
						
						<view style="width: 100%;height: 10rpx;float: left;"></view>
					</view>
				</view>
				 
				<view class="modal-content-item">
					<view class="modal-content-item-lable">
						姓名：
					</view>
					<view class="modal-content-item-con">
						<input type="text" class="modal-content-item-int" placeholder="请输入姓名"/>
					</view>
				</view>
				<view class="modal-content-item">
					<view class="modal-content-item-lable">
						微信号：
					</view>
					<view class="modal-content-item-con">
						<input type="text" class="modal-content-item-int" placeholder="请输入微信号"/>
					</view>
				</view>
				<view class="modal-content-item">
					<view class="modal-content-item-lable">
						联系电话：
					</view>
					<view class="modal-content-item-con">
						<input type="text" class="modal-content-item-int" placeholder="请输入联系电话"/>
					</view>
				</view> 
				<view class="modal-content-item" style="border: none;margin-top: 40rpx;margin-bottom: 20rpx;">
					<view class="modal-content-item-btn" @click="closeModal">
						取消
					</view>
					<view class="modal-content-item-btn">
						申请入群
					</view>
				</view> 
		    </view>
		</view>
	</view>
</template>

<script setup>
	const modalVisible=ref(false);
	function showModal() {
	    modalVisible.value = true;
	}
	function closeModal() {
	    modalVisible.value = false;
	}
	const banner=ref({
		indicatorDots: true,
		autoplay: true,
		interval: 2000,
		duration: 500
	});
	const huodong=ref(
	{
		name:'一个社群社群社群社群',
		all:50,
		join:40,
		price:9.9, 
		address:'我是一个小区', 
		xiangQing:[
			{
				id:1,
				title:'这是个标题',
				info:[
					{
						id:1,
						title:'群的内容',
						content:'不给你说'
					},
					{
						id:2,
						title:'想知道吗',
						content:'我还不说'
					}
				]
			},
			{
				id:2,
				title:'再来一个标题',
				info:[
					{
						id:1,
						title:'类型',
						content:'试听课'
					},
					{
						id:2,
						title:'课时',
						content:'90分钟/课时'
					},
				]
			}
		],
		xuzhi:[
			{
				id:1,
				title:'温馨提示',
				info:[
					{
						id:1,
						content:'1、付费入群。'
					},
					{
						id:2,
						content:'2、文明聊天。'
					},
					{
						id:3,
						content:'3、禁止发广告！'
					},
					{
						id:4,
						content:'4、支付成功之后，添加客服二维码邀请入群！'
					}
				]
			},
			{
				id:2,
				title:'特别注意',
				info:[
					{
						id:1,
						content:'1、购买之后，不能退。'
					},
					{
						id:2,
						content:'2、购买之后，真的不能退。'
					},
					{
						id:2,
						content:'3、退款剁手。'
					}
				]
			}
		],
		tuwen:['https://img1.baidu.com/it/u=427726287,31046258&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=500','https://img1.baidu.com/it/u=427726287,31046258&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=500'],
	}); 
</script>

<style>
	@import "./detail.scss"; 
</style>